import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "refdata",
      component: () => import("../views/AboutView.vue"),
    },
    {
      path: "/refdata",
      name: "refdata",
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import("../views/AboutView.vue"),
    },
    {
      path: "/reactive",
      name: "reactive",
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import("../views/AboutViewreac.vue"),
    },
    {
      path: "/computed",
      name: "computed",
      component: () => import("../views/computed.vue"),
    },
    {
      path: "/iffor",
      name: "iffor",
      component: () => import("../views/iffor.vue"),
    },
    {
      path: "/event",
      name: "event",
      component: () => import("../views/event.vue"),
    },
    {
      path: "/hook",
      name: "hook",
      component: () => import("../views/hook.vue"),
    },
    {
      path: "/watch",
      name: "watch",
      component: () => import("../views/watch.vue"),
    },
    {
      path: "/ref",
      name: "ref",
      component: () => import("../views/ref.vue"),
    },
    {
      path: "/component",
      name: "component",
      component: () => import("../views/component/index.vue"),
    },
    {
      path: "/model",
      name: "model",
      component: () => import("../views/model/index.vue"),
    },
    {
      path: "/vmodel",
      name: "vmodel",
      component: () => import("../views/model/vmodel2/parent.vue"),
    },
    {
      path: "/slot",
      name: "slot",
      component: () => import("../views/slot/propSlot/index.vue"),
    },
    {
      path: "/asyncComponent",
      name: "asyncComponent",
      component: () => import("../views/asyncComponent/index.vue"),
    },
    {
      path: "/hookFunction",
      name: "hookFunction",
      component: () => import("../views/hookFunction/index.vue"),
    },
    {
      path: "/use",
      name: "use",
      component: () => import("../views/use/index.vue"),
    },
    {
      path: "/question",
      name: "question",
      component: () => import("../views/question2.vue"),
    },
    {
      path: "/props",
      name: "props",
      component: () => import("../views/props/parent.vue"),
    },
    {
      path: "/jsx",
      name: "jsx",
      component: () => import("../views/jsx/index.jsx"),
    },
    {
      path: "/pinia",
      name: "pinia",
      component: () => import("../views/pinia.vue"),
    },

    // {
    //   path: "/match/:id",
    //   name: "match",
    //   props:true,
    //   component: () => import("../views/match/index.vue"),
    // },
    {
      path: "/matchhighPerson",
      name: "highPerson",
      props: true,
      component: () => import("../views/match/highPerson.vue"),
    },
    {
      path: "/routeTest",
      name: "routeTest",
      props: true,
      component: () => import("../views/route/index.vue"),
      children: [
        {
          // 当 /user/profile 匹配成功
          // UserProfile 将被渲染到 User 的 <router-view> 内部
          path: 'profile',
          component: () => import("../views/route/profile.vue")
        },
        {
          // 当 /user/posts 匹配成功
          // UserPosts 将被渲染到 User 的 <router-view> 内部
          path: 'posts',
          component: () => import("../views/route/UserPosts.vue")
        },
      ],
    },
    // {
    //   path: "/palyData",
    //   name: "palyData",
    //   component: () => import("../views/play/wst/playdata/index.vue"),
    // },
  ],
});
export default router;
